<template>
  <div class="table-search-page g-tabs-top-fixed-content-padding-wrapper">
    <a-tabs :activeKey="currentActiveKey" @change="changeTabs" type="line" :forceRender="false">
      <a-tab-pane :key="1" tab="门诊区">
        <a-card class="g-mt-10" :bordered="false">
          <div class="table-page-search-wrapper">
            <a-form layout="inline" :form="form" >
              <a-row :gutter="12">
                <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
                  <a-form-item label="开始时间">
                    <a-range-picker allow-clear v-decorator="['time']" style="width: 100%;">
                      <a-icon slot="suffixIcon" type="calendar"/>
                    </a-range-picker>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
                  <a-form-item label="客户卡号">
                    <a-input v-decorator="['cardNo']" allow-clear placeholder="客户卡号"/>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
                  <a-form-item label="联系号码">
                    <a-input v-decorator="['tel']" allow-clear placeholder="联系号码"/>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
                  <a-form-item label="客户姓名">
                    <a-input v-decorator="['name']" style="width: 100%" allow-clear placeholder="姓名"/>
                  </a-form-item>
                </a-col>
                <a-col :md="2" :lg="4" :sm="12">
                  <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                    <a-icon :type="advanced ? 'up' : 'down'" @click="advanced=!advanced" style="margin-right: 15px;"/>
                    <a-button type="primary" @click="clickSearch">查询</a-button>
                    <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
                  </div>
                </a-col>
              </a-row>
              <a-row :gutter="12" v-show="advanced">
                <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
                  <a-form-item label="开发人员">
                    <a-select
                      :showSearch="true"
                      option-filter-prop="children"
                      allow-clear
                      option-label-prop="label"
                      style="width: 100%"
                      v-decorator="['developer']"
                      placeholder="选择，搜索">
                      <a-select-option v-for="item in  developerUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
                  <a-form-item label="所属咨询">
                    <a-select
                      :showSearch="true"
                      option-filter-prop="children"
                      allow-clear
                      option-label-prop="label"
                      style="width: 100%"
                      v-decorator="['consultMan']"
                      placeholder="选择，搜索">
                      <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
                  <a-form-item label="客户等级">
                    <a-select
                      allow-clear
                      option-label-prop="label"
                      style="width: 100%"
                      v-decorator="['customerLevel']"
                      placeholder="客户等级">
                      <a-select-option v-for="item in customerLevel" :key="item.id" :label="item.name" :value="item.id">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
                  <a-form-item label="客户状态">
                    <a-select
                      allow-clear
                      option-label-prop="label"
                      style="width: 100%"
                      v-decorator="['customerState']"
                      placeholder="状态">
                      <a-select-option v-for="item in customerState" :key="item.id" :label="item.name" :value="item.id">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-card>
        <a-card :bordered="false">
          <super-table
            ref="table"
            :pageSize="10"
            :rowKey="(record,index)=> index"
            :columns="columns"
            :data="loadData"
          >
            <!--序号-->
            <template slot="index" slot-scope="text,record,index">
              <span>{{(queryParam.pageNum-1)*pagination.pageSize+(index+1)}}</span>
            </template>
            <!--客户卡号-->
            <template slot="cardNo" slot-scope="text,record">
              <a class="g-f-14" @click="toCustomerDetails(text,record)">{{ text }}</a>
            </template>
            <!--治疗状态-->
            <template slot="treatState" slot-scope="text">
              <a-tag color="orange" v-if="text==0" >等待治疗</a-tag>
              <a-tag color="green" v-else-if="text==1" >开始治疗</a-tag>
              <a-tag color="cyan" v-else-if="text==2" >治疗完成</a-tag>
              <span v-else></span>
            </template>

            <template slot="action" slot-scope="text,record">
              <div class="g-flex">
                <a-button class="g-bt-pad-0" :disabled="record.treatState!=0" type="link" @click="clickTreat(record,1)" >开始</a-button>
                <a-button class="g-bt-pad-0" :disabled="record.treatState!=1" type="link" @click="clickTreat(record,2)">完成</a-button>
                <a-button class="g-bt-pad-0" type="link" @click="openDrawer(record)" >治疗详情</a-button>
              </div>
            </template>
          </super-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="住院区">
        <a-list  :grid="{ gutter:8, sm: 2, md:3,lg: 4,xl:4,xxl:6 }" :data-source="BedList" :loading="bedListLoading">
          <a-list-item  slot="renderItem" slot-scope="item">
            <a-card  >
              <a-card-meta >
                <template slot="title" >
                  <a >{{item.bedName}}</a><a-tag v-if="item.hospitalizedId" style="margin-left: 10px;display: inline;" color="#87d068">正在使用</a-tag>
                </template>
                <div slot="description" style="height: 120px;" >
                  <a-descriptions   :column="1" size="small">
                    <a-descriptions-item  label="饮食状况">{{ item.dietCondition }}</a-descriptions-item>
                    <a-descriptions-item  label="护理等级">{{ item.careLevel }}</a-descriptions-item>
                    <a-descriptions-item  label="主治医生">{{ item.drName }}</a-descriptions-item>
                    <a-descriptions-item label="病情">{{ item.conditionofapatient }}</a-descriptions-item>
                  </a-descriptions>
                </div>

                <template v-if="item.hospitalizedId" >
                  <a-avatar v-if="item.sex==1" slot="avatar" :size="50" :src="require('@/assets/woman.png')" />
                  <a-avatar v-else  slot="avatar" :size="50" :src="require('@/assets/man.png')" />
                </template>
                <a-avatar v-else  slot="avatar" :src="require('@/assets/bed.png')" :size="42"  />
              </a-card-meta>
              <!--底部操作栏-->
              <template slot="actions" class="ant-card-actions ">
                <a-button :disabled="!item.hospitalizedId" @click="openDrawer(item)"  type="link" class="g-bt-pad-0" >治疗详情</a-button>
<!--                <a-button :disabled="!item.hospitalizedId" type="link" class="g-bt-pad-0" >医嘱情况</a-button>-->
                <a-dropdown :disabled="!item.hospitalizedId">
                  <a-menu slot="overlay" >
                    <a-menu-item key="1" >
                      <a-button type="link" class="g-bt-pad-0" >病历管理</a-button>
                    </a-menu-item>
                    <a-menu-item key="2" >
                      <a-button type="link" class="g-bt-pad-0" >处方打印</a-button>
                    </a-menu-item>
                    <a-menu-item key="3" >
                      <a-button type="link" class="g-bt-pad-0" >门诊病历</a-button>
                    </a-menu-item>
                    <a-menu-item key="4" >
                      <a-button type="link" class="g-bt-pad-0" >手术记录</a-button>
                    </a-menu-item>
                    <a-menu-item key="5" >
                      <a-button type="link" class="g-bt-pad-0" >医疗不良事件</a-button>
                    </a-menu-item>
                    <a-menu-item key="6" >
                      <a-button type="link" class="g-bt-pad-0" >照片比例</a-button>
                    </a-menu-item>
                  </a-menu>
                  <a-button type="link" class="g-bt-pad-0"> 更多 <a-icon type="down" /> </a-button>
                </a-dropdown>
              </template>
            </a-card>
          </a-list-item>
        </a-list>
      </a-tab-pane>
    </a-tabs>
    <!--治疗详情--抽屉-->
    <drawer ref="drawer" />
  </div>
</template>

<script>
import { AllHisUser, CustomerLevel, CustomerState } from '@/api/customer/customer'
import { dictTypeListForCode } from '@/api/modular/main/customer/customerTriage'
import { CustomerFeedback } from '@/api/modular/main/customer/customerReturnVisit'
import { SuperTable } from '@/components'
import moment from 'moment'
import Drawer from '@/views/workstation/doctor/detailsDrawer'
import { workstationList, treatment, doctorBedList } from '@/api/workstation/doctor'
export default {
  components: {
    SuperTable,
    Drawer
  },
  data() {
    return {
      loadData: parameter => {
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        return workstationList(this.queryParam).then(res => {
          this.loading = false//关闭加载
          return res
        })
      },
      form: this.$form.createForm(this),
      customerState: [],//客户状态
      customerLevel: [],//客户等级
      advanced: false, // 高级搜索 展开/关闭
      disabled: true, //是否禁用新增按钮
      columns: [
        { title: '序号', scopedSlots: { customRender: 'index' },width:80,fixed:'left' },
        { title: '客户卡号', dataIndex: 'cardNo',scopedSlots: { customRender: 'cardNo' },fixed:'left', ellipsis: true },
        { title: '客户姓名', dataIndex: 'name', ellipsis: true },
        { title: '治疗状态', dataIndex: 'treatState',scopedSlots: { customRender: 'treatState' } },
        { title: '咨询师', dataIndex: 'consultMan',ellipsis: true },
        { title: '治疗日期', dataIndex: 'treatDate', ellipsis: true },
        { title: '领料状态', dataIndex: 'totalChargeAm', ellipsis: true },
        { title: '操作', scopedSlots: { customRender: 'action' }, fixed:'right', width: 150},
      ],
      data: [],
      pagination: {
        current: 1,//当前页
        pageSize: 10,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `共有 ${total} 条数据`//分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        beginTime: undefined,
        endTime: undefined,
      },
      loading: true, //加载状态,
      current_row_index: '',
      customerFeedback: {},
      allHisUser: {}, //回访人对象
      developerUser:{},//所属咨询
      currentActiveKey: 1,
      BedList:[],
      bedListLoading:false,
    }
  },
  created() {
    this.getBaseFormInfo()
    this.getList()
  },
  methods: {
    moment,
    //点击查询-高级搜索
    clickSearch() {
      const form_values = this.form.getFieldsValue()
      const time = form_values.time
      if (time && time.length > 0) {
        form_values.beginTime = moment(time[0]).format('YYYY-MM-DD')
        form_values.endTime = moment(time[1]).format('YYYY-MM-DD')
        form_values.time=undefined
      }
      this.queryParam = Object.assign(this.queryParam,form_values)
      this.$refs.table.loadData()
    },
    clickReset() {
      this.form.resetFields()
      this.queryParam={}
      this.queryParam.pageSize=10
      this.queryParam.pageNum=1
    },
    openDrawer(record){
      this.$refs.drawer.show(record)
    },
    clickTreat(record,type){
      const _this =this
      const state = type == 1 ? '开始' : '完成'
      this.$confirm({
        title: `${state}治疗`,
        content: h => <div style="color:red;">确认{state}治疗吗？</div>,
        onOk() {
          const params = {
            treatId  :record.treatId,
            treatState :type,
            customerId:record.customerId,
          }
          treatment(params).then(res=>{
            if(res.code==200){
              _this.$message.success(res.message)
              _this.$refs.table.refresh(true)
            }else{
              _this.$message.info(res.message)
            }
          })
        },
      })
    },
    changeTabs(key) {
      this.currentActiveKey = key
    },
    //点击查看客户详情
    toCustomerDetails(text, record) {
      // console.log(record)
      this.$router.push({
        path: 'customer_details', query: {
          id: record.customerId,
          card_no: record.cardNo,
          customerName:record.customerName
        }
      })
    },
    /**
     * 获取列表
     * */
    getList(){
      this.bedListLoading = true
      doctorBedList().then(res => {
        console.log('床位列表',res)
        this.BedList = res.data
      }).finally(()=>{
        this.bedListLoading = false
      })
    },
    //获取表单相关接口
    getBaseFormInfo() {
      CustomerFeedback().then(res => {
        // console.log('回访相关表单接口',res)
        this.customerFeedback = res
      })
       // dictTypeListForCode  AllHisUser  所属咨询
      dictTypeListForCode({code:"XCZXS"}).then((res) => {
        // console.log('全员员工接口',res)
        this.allHisUser = res
      })
      // 开发人员 
      dictTypeListForCode({code:"WLZXS"}).then((res) => {
        // console.log('全员员工接口',res)
        this.developerUser = res
      })
      CustomerLevel().then(res => {
        this.customerLevel = res
      })
      CustomerState().then(res => {
        this.customerState = res
      })
    }
  }

}
</script>

<style lang="less" scoped>

.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
  margin-bottom: 2px;
}

.currentRowClass {
  background: #e6f7ff;
}

/deep/ .ant-tabs-bar {
  border-bottom: none;
}

/deep/ .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
  right: -10px;
}
/deep/  .ant-descriptions-small .ant-descriptions-row > td{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>